<template>
	<view class="add-score-page">
		<view class="my-navigation">
			<custom-navbar title="护理评价" :isReturnVisible="true" :isAddVisible="false" />
		</view>
		<view class="evaluation-page">
			<!-- 整体评价 -->
			<view class="form-section">
				<text class="section-title">整体评价</text>
				<textarea v-model="formData.evaluation" class="evaluation-textarea" placeholder="请描述您的护理体验..."
					maxlength="200" />
				<text class="character-counter">{{ formData.evaluation.length }}/200</text>
			</view>

			<!-- 评分项 -->
			<view class="rating-section">
				<view class="rating-item">
					<view class="rating-label">
						<text class="rating-title">服务态度与沟通</text>
						<text class="rating-max">(满分25分)</text>
					</view>
					<view class="score-input-wrapper">
						<input type="number" v-model="formData.attitudeScore" @input="validateScore('attitudeScore')"
							class="score-input" placeholder="0" maxlength="2" />
						<view class="score-slider">
							<view class="score-progress" :style="{ width: formData.attitudeScore / 25 * 100 + '%' }">
							</view>
						</view>
					</view>
				</view>

				<view class="rating-item">
					<view class="rating-label">
						<text class="rating-title">专业技能与操作</text>
						<text class="rating-max">(满分25分)</text>
					</view>
					<view class="score-input-wrapper">
						<input type="number" v-model="formData.skillScore" @input="validateScore('skillScore')"
							class="score-input" placeholder="0" maxlength="2" />
						<view class="score-slider">
							<view class="score-progress" :style="{ width: formData.skillScore / 25 * 100 + '%' }">
							</view>
						</view>
					</view>
				</view>

				<view class="rating-item">
					<view class="rating-label">
						<text class="rating-title">安全防护措施</text>
						<text class="rating-max">(满分25分)</text>
					</view>
					<view class="score-input-wrapper">
						<input type="number" v-model="formData.safetyScore" @input="validateScore('safetyScore')"
							class="score-input" placeholder="0" maxlength="2" />
						<view class="score-slider">
							<view class="score-progress" :style="{ width: formData.safetyScore / 25 * 100 + '%' }">
							</view>
						</view>
					</view>
				</view>

				<view class="rating-item">
					<view class="rating-label">
						<text class="rating-title">整体体验感受</text>
						<text class="rating-max">(满分25分)</text>
					</view>
					<view class="score-input-wrapper">
						<input type="number" v-model="formData.experienceScore"
							@input="validateScore('experienceScore')" class="score-input" placeholder="0"
							maxlength="2" />
						<view class="score-slider">
							<view class="score-progress" :style="{ width: formData.experienceScore / 25 * 100 + '%' }">
							</view>
						</view>
					</view>
				</view>

				<!-- 总得分展示 -->
				<view class="total-score-box">
					<text class="total-text">总得分</text>
					<view class="score-box">
						<text class="score-value">{{ totalScore.toFixed(1) }}</text>
						<text class="score-max">/100</text>
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-section">
				<button class="submit-button" @click="handleSubmit">
					立即评价
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'; // 从 vue 导入 ref
	import {
		onLoad
	} from '@dcloudio/uni-app'; // 从 uni-app 导入生命周期钩子
	import customNavbar from '@/components/custom-navbar.vue';
	import {
		addRecordScore
	} from '../../api/score';
	// 示例数据
	// const formData = ref({
	// 	recordId: 21,
	// 	evaluation: "护理服务非常满意，医护人员态度友好，专业技能娴熟",
	// 	attitudeScore: 24,
	// 	skillScore: 25,
	// 	safetyScore: 20,
	// 	experienceScore: 23,
	// })
	const serviceRecordId = ref(null);
	const formData = ref({
		recordId: serviceRecordId.value,
		evaluation: "",
		attitudeScore: 0,
		skillScore: 0,
		safetyScore: 0,
		experienceScore: 0,
	})


	// 修改后的 totalScore 计算属性
	const totalScore = computed(() => {
		const attitude = parseFloat(formData.value.attitudeScore) || 0;
		const skill = parseFloat(formData.value.skillScore) || 0;
		const safety = parseFloat(formData.value.safetyScore) || 0;
		const experience = parseFloat(formData.value.experienceScore) || 0;

		return attitude + skill + safety + experience;
	});

	// 页面加载时获取服务记录ID
	onLoad((options) => {
		formData.value.recordId = options.serviceRecordId || 0;
		console.log('接收到的服务记录ID:', formData.value.recordId);
	});

	// 修改后的 validateScore 函数
	const validateScore = (field) => {
		let value = parseFloat(formData.value[field]);

		if (isNaN(value)) {
			formData.value[field] = null; // 设置为 null 而不是 0
			return;
		}

		// 允许小数，不四舍五入
		if (value < 0) formData.value[field] = 0;
		else if (value > 25) formData.value[field] = 25;
		else formData.value[field] = value; // 保留原始值（可以是小数）
	};

	// 修改后的 validateForm 函数
	const validateForm = () => {
		// 检查四项得分是否为空且在0-25之间
		const requiredFields = ['attitudeScore', 'skillScore', 'safetyScore', 'experienceScore'];

		for (const field of requiredFields) {
			const value = formData.value[field];

			// 检查是否为空
			if (value === null || value === undefined || value === '') {
				uni.showToast({
					title: `请填写${getFieldName(field)}`,
					icon: 'none'
				});
				return false;
			}

			// 检查是否在0-25之间
			const numValue = parseFloat(value);
			if (isNaN(numValue) || numValue < 0 || numValue > 25) {
				uni.showToast({
					title: `${getFieldName(field)}必须在0-25之间`,
					icon: 'none'
				});
				return false;
			}
		}

		return true;
	};
	// 提交评价
	const handleSubmit = () => {
		if (!validateForm()) return;

		// 在实际应用中，取消下面的注释并使用您的API调用

		addRecordScore(formData.value).then(res => {
			uni.showToast({
				title: '评价成功！',
				icon: 'success'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}).catch(err => {
			uni.showToast({
				title: '评价失败，请重试',
				icon: 'none'
			});
			console.error('评价失败：', err);
		});

	};
</script>

<style>
	.add-score-page {
		padding-bottom: 20px;
		background: url('@/static/background.png') no-repeat;
		min-height: 100vh;
		padding: 0;
	}

	.my-navigation {
		margin-bottom: 80px;
		border: 1px solid #fff;
	}

	.evaluation-page {
		padding: 0 20px 30px;
		/* background-color: #f8f8f8; */
		min-height: calc(100vh - var(--status-bar-height) - 44px);
	}

	.form-section {
		background-color: #fff;
		border-radius: 12px;
		padding: 20px;
		margin-top: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 15px;
	}

	.evaluation-textarea {
		width: 100%;
		height: 120px;
		background-color: #f8f9fa;
		border-radius: 8px;
		padding: 12px;
		font-size: 16px;
		color: #333;
		border: 1px solid #eee;
		box-sizing: border-box;
	}

	.character-counter {
		display: block;
		text-align: right;
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.rating-section {
		background-color: #fff;
		border-radius: 12px;
		padding: 20px;
		margin-top: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.rating-item {
		margin-bottom: 25px;
	}

	.rating-label {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}

	.rating-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}

	.rating-max {
		font-size: 13px;
		color: #999;
	}

	.score-input-wrapper {
		display: flex;
		align-items: center;
	}

	.score-input {
		width: 60px;
		height: 40px;
		background-color: #f8f9fa;
		border-radius: 8px;
		padding: 0 12px;
		font-size: 18px;
		font-weight: bold;
		color: #F6A031;
		text-align: center;
		border: 1px solid #eee;
		margin-right: 15px;
	}

	.score-slider {
		flex: 1;
		height: 8px;
		background-color: #eee;
		border-radius: 4px;
		position: relative;
		overflow: hidden;
	}

	.score-progress {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		background-color: #F6A031;
		border-radius: 4px;
		transition: width 0.3s ease;
	}

	.total-score-box {
		background-color: #fef6e9;
		border-radius: 12px;
		padding: 15px;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.total-text {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.score-box {
		display: flex;
		align-items: baseline;
	}

	.score-value {
		font-size: 28px;
		font-weight: bold;
		color: #F6A031;
	}

	.score-max {
		font-size: 16px;
		color: #999;
		margin-left: 5px;
	}

	.submit-section {
		margin-top: 40px;
	}

	.submit-button {
		background: linear-gradient(135deg, #F6A031, #f9b75d);
		color: #fff;
		border-radius: 30px;
		font-size: 18px;
		font-weight: 500;
		height: 50px;
		line-height: 50px;
		box-shadow: 0 4px 15px rgba(246, 160, 49, 0.4);
		transition: all 0.3s ease;
	}

	.submit-button:active {
		transform: translateY(2px);
		box-shadow: 0 2px 8px rgba(246, 160, 49, 0.4);
	}
</style>